<template>
  <div class="contain info-container">
    <header>个人信息</header>
    <div class="person-info clearfix">

      <!-- 头像区域 -->
      <div class="head-img fl">
        <w-upload v-model="userInfo.userHeadImg" :width="160" :height="160" :is-type="false"></w-upload>
        <w-button-ghost type="main" @on-click="onUpdateAvatar">更换头像</w-button-ghost>
      </div>

      <!-- 信息内容 -->
      <div class="m-user-info-con fr">
        <w-form-validate @on-validate="onValidated">
          <div class="form-horizontal">
            <!-- 呢称 -->
            <div class="form-group">
              <div class="col-sm-3">
                <w-label>昵称</w-label>
              </div>
              <div class="col-sm-9">
                <w-input v-model="userInfo.nickName" rule="isEmpty|between:4-25" error="请输入昵称|昵称限制在4-25字符"></w-input>
              </div>
            </div>
            <!-- 性别 -->
            <div class="form-group">
              <div class="col-sm-3">
                <w-label>性别</w-label>
              </div>
              <div class="col-sm-9" style="line-height: 23px;">
                <w-radio v-model="userInfo.sex" label="1" name="sex">男</w-radio>
                <w-radio v-model="userInfo.sex" label="0" name="sex">女</w-radio>
              </div>
            </div>
            <!-- 主营行业 -->
            <div class="form-group">
              <div class="col-sm-3">
                <w-label>主营行业</w-label>
              </div>
              <div class="col-sm-9">
                <select class="form-control" v-model="userInfo.mainIndustryId"> 
                  <option v-for="(item, index) in aMainIndustry" :key="index" :value="item.tradeId">{{item.tradeName}}</option>
                </select>
              </div>
            </div>
            <!-- 主营产品 -->
            <div class="form-group">
              <div class="col-sm-3">
                <w-label>主营产品</w-label>
              </div>
              <div class="col-sm-9">
                <w-input v-model="userInfo.mainProducts" :maxlength="20" rule="isEmpty|between:1-20" error="请输入主营产品|文字描述20字内"></w-input>
              </div>
            </div>
            <!-- 所在地 -->
            <div class="form-group">
              <div class="col-sm-3">
                <w-label :must="false">所在地</w-label>
              </div>
              <div class="col-sm-9">
                <w-areapicker v-model="userInfo.areaId"></w-areapicker>
                <!-- <p style="color: #a94442; margin-top: 3px">{{text}}</p> -->
              </div>
            </div>
            <!-- 详细地址 -->
            <div class="form-group">
              <div class="col-sm-3">
                <w-label :must="false">详细地址</w-label>
              </div>
              <div class="col-sm-9">
                <w-input v-model="userInfo.detailAddress" :validate="false" type="textarea"></w-input>
              </div>
            </div>
          </div>
          <w-button type="main">确定</w-button>
        </w-form-validate>
      </div>
    </div>
  </div>
</template>

<script>
  import { apiTrade, apiPersonalInfo, apiPersonalInfoEdit } from 'js/api'
  import { mapGetters } from 'vuex'

  export default {
    data() {
      return {
        userInfo: { // 提交的用户信息
          userHeadImg: '',
          nickName: '',
          sex: '1',
          mainIndustryId: '1',
          mainProducts: '',
          areaId: '',
          detailAddress: ''
        },
        aMainIndustry: [],
        text: ''
      }
    },
    created() {
      apiTrade().then(data => {
        this.aMainIndustry = data.TradeList
      })
      apiPersonalInfo(this.token).then(data => {
        this.userInfo = data
        this.userInfo.nickName = this.userInfo.nickName || ''
        this.userInfo.mainProducts = this.userInfo.mainProducts || ''
        this.userInfo.userHeadImg = this.userInfo.userHeadImg || ''
        this.userInfo.mainIndustryId = data.mainIndustryId || this.aMainIndustry[0].id
        this.userInfo.areaId = `${data.shengId}/${data.shiId}/${data.areaId}`
        this.$children[2].$children[9]._updateSelectList(this.userInfo.areaId)
      })
    },
    methods: {
      // 提交表单
      onValidated() {
        this.userInfo.mainIndustryId = this.userInfo.mainIndustryId ? this.userInfo.mainIndustryId.toString() : ''
        if (this.userInfo.areaId == 'null') {
          this.text = '请选择省市区'
        } else {
          this.text = ''
          apiPersonalInfoEdit(this.token, this.userInfo).then(data => {
            this.$toast('修改成功', () => {
              let users = this.$store.getters.userInfo || {}
              this.$set(users, 'nickName', this.userInfo.nickName)
              this.userInfo.userHeadImg && this.$set(users, 'userHeadImg', this.userInfo.userHeadImg)
              this.$store.commit('updateUserInfo', users)
            })
          })
        }
      },
      // 切换头像
      onUpdateAvatar() {
        document.getElementsByName('imgFile')[0].click()
      }
    },
    computed: {
      ...mapGetters(['token'])
    }
  }
</script>

<style lang="scss">
  @import '../../scss/_var.scss';
  .info-container {
    background-color: $color-white;
    padding: 20px 20px 80px 20px;
    
    header {
      padding-bottom: 20px;
      color: $color-dark;
      font-size: 14px;
    }
  }

  .person-info {
    position: relative;
    height: 422px;
    padding: 40px 164px;
    border: 1px solid $border-gray;

    .head-img {
      margin-top: 80px;
      text-align: center;
      .single-upload-wrap {
        border-radius: 80px;
        overflow: hidden;
      }
      .btn-ghost {
        width: 96px;
        height: 26px;
        margin-top: 20px;
      }
    }
  }

  .m-user-info-con {
    width: 408px;
    .form-group {
      margin-bottom: 14px;
    }
    .form-control {
      height: 28px;
    }
    textarea.form-control {
      height: 70px;
    }
    .main {
      position: absolute;
      right: 0;
      bottom: -58px;
      width: 160px;
      height: 38px;
    }
    .control-label {
      line-height: 28px;
      color: $color-gray;
    }
  }
</style>